.main_body {
  margin: 0;
  background-color: #000;
  color: #fff;
  /*font-family: Monospace;*/
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: 13px;
  line-height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
}

a {
  color: #ff0;
  text-decoration: none;
  pointer-events: auto;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  /* text-transform: uppercase; */
}

canvas {
  display: block;
}

#info {
  position: absolute;
  top: 0px;
  color: #ffff00;
  background-color: #222;
  width: inherit;
  font-size: inherit;
  padding: 0px;
  box-sizing: border-box;
  text-align: left;
  z-index: 3; /* TODO Solve this in HTML */
}

#object-category-selector,
#object-track-id-editor,
#scene-selector,
#frame-selector,
#camera-selector,
#obj-ids-of-scene {
  background-color: inherit;
  color: inherit;
  border-width: 0;
}

#maincanvas {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  padding: 0px;
  box-sizing: border-box;
  text-align: left;
  align-content: right;

  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  /*z-index: 1; /* TODO Solve this in HTML */
}

#maincanvas-svg {
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 0px;

  stroke: #00ff0088;
  stroke-width: 2px;
  fill: #00ff0022;
}

/* 
    this css can be moved to dynamic css in main.js, after obj-type css being set 
    for now when a box is selected, its objtype class in css is removed so the color is set by selected state.
    dynamic set obj-type css has higher priority than this one.
    */
.box-svg-selected {
  stroke: #ff00ff88;
  fill: #ff00ff22;
}

#maincanvas-wrapper {
  position: absolute;
  resize: both;
  overflow: hidden;
  top: 0%;
  left: 20%;
  width: 40%;
  height: 30%;
  padding: 0px;
  margin: 0px;
}

#resize-handle {
  position: absolute;
  width: 30px;
  height: 30px;
  right: 0px;
  bottom: 0px;
}
#resize-handle:hover {
  cursor: se-resize;
}

#maincanvas-c {
  position: relative;
  top: 0%;
  left: 0%;
  width: inherit;
  height: 100%;

  padding: 0px;
  box-sizing: border-box;
  text-align: left;
  align-content: left;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: 1; /* TODO Solve this in HTML */
}

#obj-editor {
  position: absolute;
  color: #ff00ff;
  background-color: #222;
  font-size: inherit;
  padding: 0px;
  box-sizing: border-box;
  text-align: left;
  display: none; /* defult hidden */
}

#obj-label {
  display: none;
}

#category-id-editor {
  display: none;
  color: inherit;
  background: inherit;
  padding: inherit;
}

#canvas {
  position: absolute;
  top: 70%;
  left: 0%;
  color: #ffff00;
  width: 20%;
  height: auto;
  padding: 0px;
  box-sizing: border-box;
  text-align: left;
  align-content: left;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  z-index: 1; /* TODO Solve this in HTML */
}
#camera {
  width: 100%;
  height: 100%;
}

#main-view-grid {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
}

#context-menu-wrapper {
  position: absolute;
  display: none;
  top: 0%;
  left: 0%;
  height: 100%;
  width: 100%;
  z-index: 10;
}

#context-menu,
#object-context-menu {
  position: absolute;
  display: block;
  width: 180px;
  background-color: #222;
}

#new-submenu {
  display: none;
  position: absolute;
  padding-left: 3px;
  width: 120px;
  background-color: #222;
}
.menu-item {
  cursor: pointer;
}
.menu-item:hover {
  background-color: gray;
}

.menu-item-icon {
  display: inline;
}
.menu-item-text {
  display: inline;
}

.menu-seperator {
  padding: 0.5px;
  background-color: #333;
}

.dg.ac {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2 !important; /* TODO Solve this in HTML */
}

.float-label {
  color: #0000ff;
  position: absolute;
  display: inline-flex;
  /* background-color: #403b3b99; */
}

.label-obj-id-text,
.label-obj-type-text {
  padding-left: 5px;
}

.label-out-view {
  display: none;
}

.selected-float-label {
  color: #ff00ff;
  position: absolute;
  /* background-color: #403b3b99; */
}

.ui-button {
  background-color: #222;
  padding-left: 0;
  padding-right: 0;
  border-width: 1;
  border-color: #222;
  color: yellow;

  /* position: relative;
    display: inline-block; */
}

.view-manipulator {
  display: none; /* default */
}

#poly-split-manipulator {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: #00000000;
  border-width: 0px;
}

#z-view-manipulator {
  position: absolute;
  top: 0%;
  left: 80%;
  width: 20%;
  height: 40%;
  background-color: #00000000;
  border-width: 0px;
}

#y-view-manipulator {
  position: absolute;
  top: 40%;
  left: 80%;
  width: 20%;
  height: 30%;
  background-color: #00000000;
  border-width: 0px;
}

#x-view-manipulator {
  position: absolute;
  top: 70%;
  left: 80%;
  width: 20%;
  height: 30%;
  background-color: #00000000;
  border-width: 0px;
}

.ew-handle:hover {
  cursor: ew-resize;
}

.ns-handle:hover {
  cursor: ns-resize;
}

.nw-handle:hover {
  cursor: nw-resize;
}
.ne-handle:hover {
  cursor: ne-resize;
}

.sw-handle:hover {
  cursor: sw-resize;
}

.se-handle:hover {
  cursor: se-resize;
}

.grab-handle:hover {
  cursor: grab;
}

.v-table-wrapper {
  display: none;
}

td {
  padding: 0px;
}

.svg-line {
  stroke-dasharray: 3, 3;
  stroke: #00000000;
  stroke-width: 1px;
  stroke-opacity: 0.6;
}

.subview-svg {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
}

.v-buttons-wrapper {
  position: absolute;
  bottom: 0%;
  right: 0%;
  background-color: #222;
  margin: 1px;
  /* box-sizing: content-box; */
}

#select-box {
  display: none;
  position: fixed;
  border: 1px solid #55aaff;
  background-color: rgba(75, 160, 255, 0.3);
}

#main-view-svg {
  position: absolute;
  top: 0%;
  left: 0%;
}

.grid-line {
  stroke-dasharray: 3, 3;
  stroke: yellow;
  stroke-width: 1px;
  stroke-opacity: 0.2;
}

.absoluteTopLeftZeroW100H100 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
